<template>
  <div class="index-container">
    <div class="one">
      <div class="left br-15">
        <h2>下午好，系統管理員！</h2>
        <div>
          <div class="index-1">
            <div>
              <p>未讀消息</p>
              <p class="num">
                <count-to :endVal="2947"></count-to>
              </p>
            </div>
          </div>
          <div class="index-2">
            <div>
              <p>流程待辦</p>
              <p class="num">
                <count-to :endVal="135"></count-to>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="right br-15">
        <div class="head">
          <div>快捷選單</div>
          <el-button>數據導出</el-button>
        </div>
        <div class="quick">
          <div class="quick-item" v-for="(item, index) in quickListData" :key="index">
            <svg-icon :icon-class="item.icon"></svg-icon>
            <div>{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="two">
      <div class="data-count br-15" v-for="(item, index) in dataCountListData" :key="index">
        <div class="data-count-wrap">
          <div class="left">
            <div class="title">{{ item.title }}</div>
            <count-to class="num" :decimals="Number.isInteger(item.num) ? 0 : 1" :endVal="item.num" :suffix="item.isPercent ? '%' : ''"></count-to>
          </div>
          <div class="right">
            <div class="right-top">
              <!-- 如果是上升則是 up-red -->
              <svg-icon :icon-class="item.isUp ? 'up-red' : 'down-green'"></svg-icon>
              <!-- 上升則是 #FF0606 下降則是 #58CE93 -->
              <count-to
                class="percent-num"
                :decimals="Number.isInteger(item.percentNum) ? 0 : 1"
                suffix="%"
                :color="item.isUp ? '#FF0606' : '#58CE93'"
                :endVal="item.percentNum"
              ></count-to>
            </div>
            <div>對比上月</div>
          </div>
        </div>
        <svg-icon :icon-class="item.icon"></svg-icon>
      </div>
    </div>
    <div class="three">
      <index-card v-for="(item, index) in cardListData" :item="item" :key="index"></index-card>
    </div>
    <div class="four">
      <div class="left br-15">
        <h3>待辦事項</h3>
        <div class="todo">
          <todo-item class="todo-item" v-for="(item, index) in todoListData" :item="item" :key="index"></todo-item>
        </div>
      </div>
      <div class="right br-15">
        <h3>系統公告</h3>
        <div class="notice">
          <el-scrollbar style="height: 100%">
            <div class="notice-item" v-for="item in 10" :key="item">
              <h5>系統升級通知</h5>
              <p>系統將於本週日凌晨2點進行例行升級，預計維護時間2小時，請提前做好工作安排</p>
            </div>
          </el-scrollbar>
        </div>
        <div class="more">查看更多公告></div>
      </div>
    </div>
  </div>
</template>

<script>
import IndexCard from '@/components/IndexCard/index.vue'
import TodoItem from '@/components/TodoItem/index.vue'
import countTo from 'vue-count-to'

export default {
  name: 'index',
  components: { IndexCard, TodoItem, countTo },
  data() {
    return {
      cardListData: [
        {
          title: '基礎管理組',
          bgColor: '#687EFF',
          content: [
            { icon: 'staff-index', title: '員工檔案維護', description: '管理員工基本信息' },
            { icon: 'invoice-index', title: '發票模板配置', description: '設備發票格式' },
            { icon: 'rule-index', title: '債點規則設置', description: '定義債點計算規則' },
            { icon: 'system-index', title: '系統參數設置', description: '調整系統基礎設置' }
          ]
        },
        {
          title: '財務資源組',
          bgColor: '#F9B280',
          content: [
            { icon: 'pay-index', title: '付款流程發起', description: '建立並管理付款申請' },
            { icon: 'cost-index', title: '成本預算調整', description: '規劃與調整成本預算' },
            { icon: 'charge-index', title: '收费記錄查詢', description: '查看歷史收費記錄' },
            { icon: 'finance-index', title: '財務報表生成', description: '自動生成財務報表' }
          ]
        },
        {
          title: '協同運營組',
          bgColor: '#8FD7E4',
          content: [
            { icon: 'supplier-index', title: '供應商信息維護', description: '管理供應商檔案' },
            { icon: 'msg-index', title: '消息通知發送', description: '發送系統通知' },
            { icon: 'notice-index', title: '提醒規則設置', description: '自訂義提醒規則' },
            { icon: 'schedule-index', title: '日程安排管理', description: '管理團隊日程安排' }
          ]
        }
      ],
      todoListData: [
        {
          title: '發票審批',
          task: '15張發票待審批',
          date: '截止時間：今天',
          bgColor: 'rgba(211,94,71,0.1)',
          borderColor: '#D35E47',
          btnBgColor: '#d35e47'
        },
        {
          title: '付款確認',
          task: '3筆付款待確認',
          date: '截止時間：今天',
          bgColor: 'rgba(249,178,128,0.1)',
          borderColor: '#F9B280',
          btnBgColor: '#F9B280'
        },
        {
          title: '新訂單',
          task: '有新訂單更新',
          date: '截止時間：今天',
          bgColor: 'rgba(60,88,252,0.1)',
          borderColor: '#3C58FC',
          btnBgColor: '#3C58FC'
        },
        {
          title: '員工入職',
          task: '1名新員工需要建檔',
          date: '截止時間：今天',
          bgColor: '#F9F9FA',
          borderColor: '#D9D9D9',
          btnBgColor: '#8A909A'
        }
      ],
      quickListData: [
        { icon: 'quick-index-1', title: '新建員工檔案' },
        { icon: 'quick-index-2', title: '新建發票' },
        { icon: 'quick-index-3', title: '新建債點' },
        { icon: 'quick-index-4', title: '供應商信息' }
      ],
      dataCountListData: [
        { icon: 'data-count-1', title: '發票統計', num: 1350, percentNum: 12.5, isUp: true },
        { icon: 'data-count-2', title: '債點動態', num: 1507, percentNum: 12.5, isUp: true },
        { icon: 'data-count-3', title: '債點動態', num: 487, percentNum: 10.8, isUp: true },
        { icon: 'data-count-4', title: '員工效能', num: 98.7, isPercent: true, percentNum: 45.9, isUp: true }
      ]
    }
  }
}
</script>

<style scoped lang="less">
.index-container {
  .one,
  .two,
  .three {
    margin-bottom: 22px;
  }
  .one {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    > div {
      height: 242px;
      box-sizing: border-box;
      flex: auto;
    }
    .left {
      margin-right: 20px;
      background: red;
      padding: 20px 32px 27px;
      //min-width: 558px;
      background: url('@/assets/image-index-1.svg') no-repeat center center;
      background-size: cover;
      h2 {
        font-size: 18px;
        line-height: 22px;
        margin: 0 0 33px 0;
      }
      > div {
        display: flex;
        justify-content: flex-start;
        .index-1,
        .index-2 {
          width: 126px;
          height: 128px;
          position: relative;
          p {
            margin: 0;
            font-size: 14px;
            line-height: 17px;
            &:first-child {
              margin-bottom: 5px;
            }
          }
          > div {
            position: relative;
            left: 19px;
            top: 71px;
          }
        }
        .index-1 {
          margin-right: 21px;
          background: url('@/assets/index-1.svg') no-repeat center center;
        }
        .index-2 {
          background: url('@/assets/index-2.svg') no-repeat center center;
        }
      }
    }
    .right {
      //min-width: 662px;
      padding: 20px 40px 27px;
      background: #fff;
      .head {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        align-items: center;
        margin-bottom: 20px;
        > div {
          line-height: 19px;
        }
        .el-button {
          border-radius: 10px;
          font-size: 14px;
          height: 33px;
          padding: 4px 20px;
        }
      }
      .quick {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        &-item {
          //min-width: 132px;
          height: 154px;
          margin-right: 20px;
          flex: auto;
          text-align: center;
          padding-top: 24px;
          background: linear-gradient(180deg, #f1f7ff 0%, #ffffff 100%);
          .svg-icon {
            width: 45px;
            height: 43px;
            margin-bottom: 21px;
          }
          > div {
            font-size: 14px;
            line-height: 17px;
          }
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
  .two {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .data-count {
      margin-right: 20px;
      background: #fff;
      height: 106px;
      //min-width: 294px;
      flex: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-wrap {
        padding: 23px 24px;
        display: flex;
        justify-content: flex-start;
        align-items: end;
        flex-wrap: wrap;
        .left {
          margin-right: 16px;
          .title {
            font-size: 14px;
            line-height: 17px;
            margin-bottom: 14px;
          }
          .num {
            font-size: 24px;
            line-height: 24px;
          }
        }
        .right {
          &-top {
            .svg-icon {
              font-size: 12px;
              vertical-align: middle;
            }
            .percent-num {
              font-size: 14px;
              color: #ff0606;
            }
          }
        }
      }
      > .svg-icon {
        font-size: 50px;
        margin-right: 31px;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .three {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .four {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    > div {
      flex: auto;
    }
    .left {
      //min-width: 712px;
      height: 368px;
      background: #fff;
      padding: 34px 32px 29px;
      margin-right: 15px;
      h3 {
        font-size: 18px;
        line-height: 25px;
        margin-top: 0;
        margin-bottom: 28px;
      }
      .todo {
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 29px;
        place-content: space-between;
      }
    }
    .right {
      margin-right: 0;
      //min-width: 513px;
      height: 368px;
      background: #fff;
      box-sizing: border-box;
      padding: 15px 24px 18px 30px;
      h3 {
        margin: 0 0 19px 0;
        font-size: 18px;
        line-height: 25px;
      }
      .notice {
        height: 256px;
        overflow: hidden;
        ::v-deep .el-scrollbar__wrap {
          overflow-x: hidden;
        }
        .notice-item {
          padding-right: 6px;
          padding-bottom: 4px;
          margin-bottom: 12px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
          cursor: pointer;
          h5,
          p {
            margin: 0;
          }
          h5 {
            font-size: 14px;
            line-height: 17px;
          }
          p {
            font-size: 12px;
            line-height: 30px;
          }
        }
      }
      .more {
        text-align: center;
        color: #3c58fc;
        font-size: 14px;
        line-height: 17px;
        padding: 18px 0;
      }
    }
  }
}
</style>
